<!--资讯发布界面-->
<template>
  <div class="ReleaseNewPage">
    <div class="title">
      资讯发布
    </div>

    <!--新增窗口-->
    <el-dialog customClass="customWidth" fullscreen @close="addFormClose" title="新增" :visible.sync="showAddDialog">
      <el-form :model="addForm" status-icon ref="addForm" size="mini" label-width="100px" class="demo-ruleForm">
        <el-row>

          <el-col :span="14">
            <el-form-item label="标题" :required="true" prop="newTitle">
              <el-input v-model="addForm.newTitle" style="width: 120%" max="30" placeholder="请输入标题30字以内"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="14">
            <el-form-item label="资讯封面" prop="newImg" :required="true">
              <el-upload
                class="avatar-uploader"
                ref="addImg"
                :action="path+'news/addNew'"
                :auto-upload="false"
                :show-file-list="false"
                :data="addForm"
                :on-change="addHandleChange"
                :on-success="upSuccess"
                :on-preview="addHandlePictureCardPreview"
              >
                <img v-if="addForm.newImg" :src="addForm.newImg" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="14">
            <el-form-item label="资讯内容" prop="newContent" :required="true">

              <EditorBar style="width:120%;z-index:111" v-bind:hotspotContent="addForm.newContent"
                         @change="addChange"></EditorBar>

            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24" style="text-align: right;margin-top:200px;margin-left:-250px">
            <el-button type="primary" @click="addSubmit">保存</el-button>
          </el-col>
        </el-row>
      </el-form>
    </el-dialog>


    <!--编辑窗口-->
    <el-dialog customClass="customWidth" fullscreen title="编辑" :visible.sync="showEditDialog">
      <el-form :model="editForm" action="http://localhost:8071/news/editNew" size="mini" status-icon ref="editForm"
               label-width="100px" class="demo-ruleForm">
        <el-row>
          <el-col :span="14">
            <el-form-item label="标题" :required="true">
              <el-input v-model="editForm.newTitle" style="width: 120%" max="30" placeholder="请输入标题30字以内"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="14">
            <el-form-item label="资讯封面" :required="true">
              <el-upload
                class="avatar-uploader"
                ref="editImg"
                :action="path+'news/editNew'"
                :file-list="fileList"
                :auto-upload="false"
                :show-file-list="false"
                :data="editForm"
                :on-success="editSuccess"
                :on-change="editHandleChange"
                :on-preview="editHandlePictureCardPreview"
                :before-upload="beforeAvatarUpload">
                <img v-if="editForm.newImg" :src="editForm.newImg" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
            </el-form-item>
          </el-col>
        </el-row>


        <el-row>
          <el-col :span="14">
            <el-form-item label="资讯内容" :required="true">
              <EditorBar style="width:120%;z-index:111" v-bind:hotspotContent="editForm.newContent"
                         @change="eidtChange"></EditorBar>
            </el-form-item>
          </el-col>
        </el-row>


        <!--        <el-row>-->
        <!--          <el-col :span="18">-->
        <!--            <el-form-item label="资讯内容" :required="true">-->

        <!--              <el-input-->
        <!--            style="width: 120%"-->
        <!--            type="textarea"-->
        <!--            :rows="8"-->
        <!--            max="200"-->
        <!--            placeholder="对现场信息的适当补充，如当日掌子面无进度，在施工中下台阶，仰拱等其他工程时，进行相应描述。"-->
        <!--            v-model="editForm.newContent">-->
        <!--          </el-input>-->
        <!--            </el-form-item>-->
        <!--          </el-col>-->
        <!--        </el-row>-->


        <el-row>
          <el-col :span="24" style="text-align: right;margin-top:200px;margin-left:-250px">
            <el-button type="primary" @click="editSubmit">保存</el-button>
            <el-button @click="showEditDialog=false">关闭</el-button>
          </el-col>
        </el-row>
      </el-form>
    </el-dialog>


    <!--详情窗口-->

    <el-dialog customClass="customWidth" fullscreen title="详情" :visible.sync="showCheckDialog">
      <el-form :model="showForm" size="mini" status-icon ref="showForm" label-width="100px" class="demo-ruleForm">
        <el-row>
          <el-col :span="18">
            <el-form-item label="标题">
              <el-input v-model="showForm.newTitle" disabled style="width: 120%" max="30"
                        placeholder="请输入标题30字以内"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="18">
            <el-form-item label="发布时间 ">
              <el-input v-model="showForm.newTime" disabled style="width: 120%" max="30"
                        placeholder="请输入标题30字以内"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="18">
            <el-form-item label="资讯状态">
              <el-input v-model="showForm.newStatus" disabled style="width: 120%" max="30"
                        placeholder="请输入标题30字以内"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="18">
            <el-form-item label="资讯封面">
              <img style="heith:100px;width:100px"
                   v-if="showForm.newImg"
                   class="el-upload-list__item-thumbnail"
                   :src="showForm.newImg" alt=""
              >
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="18">
            <el-form-item label="资讯内容" disabled>
              <el-input

                disabled
                style="width: 120%"
                type="textarea"
                :rows="8"
                max="200"
                placeholder="对现场信息的适当补充，如当日掌子面无进度，在施工中下台阶，仰拱等其他工程时，进行相应描述。"
                v-html="showForm.newContent">
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>


        <el-row>
          <el-col :span="24" style="text-align: center;">
            <el-button @click="showCheckDialog=false">关闭</el-button>
          </el-col>
        </el-row>
      </el-form>
    </el-dialog>


    <!--头部区-->
    <div class="head">
      <el-form :inline="true" :model="form">
        <el-form-item label="搜索资讯">
          <el-input v-model="form.search" placeholder="请输入"></el-input>
        </el-form-item>

        <el-form-item label="选择资讯状态">
          <el-select v-model="form.status" placeholder="选择资讯状态">
            <el-option label="全部" value="全部"></el-option>
            <el-option label="未过审" value="未过审"></el-option>
            <el-option label="过审核" value="过审核"></el-option>
            <el-option label="待审核" value="待审核"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="getData">查询</el-button>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="getRecent">近期资讯</el-button>
        </el-form-item>

        <div>
          <el-form-item label="发布时间">
            <el-date-picker
              v-model="form.data"
              type="datetimerange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期">
            </el-date-picker>
          </el-form-item>
          <el-form-item label-width="165px" label=" ">
            <el-button type="primary" @click="showAddDialog=true">新增资讯</el-button>
          </el-form-item>
        </div>
      </el-form>


    </div>

    <!--表格区-->
    <div class="content">
      <el-table
        :data="dataList"
        stripe
        style="width: 100%">
        <el-table-column
          type="index"
          width="50">
        </el-table-column>
        <el-table-column
          v-if="false"
          prop="id"
          width="50">
        </el-table-column>
        <el-table-column
          v-if="false"
          prop="newImg"
          width="50">
        </el-table-column>
        <el-table-column
          v-if="false"
          prop="newContent"
          width="50">
        </el-table-column>
        <el-table-column
          prop="newTitle"
          label="资讯标题">
        </el-table-column>
        <el-table-column
          prop="newTime"
          label="创建时间">
        </el-table-column>
        <el-table-column
          width="100"
          prop="newStatus"
          label="资讯状态">
          <template slot-scope="scope">
            <el-tag
              :type="scope.row.newStatus == '过审核' ? 'success' : scope.row.newStatus == '待审核' ?'warning':'danger'"
              disable-transitions>{{scope.row.newStatus}}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column
          label="操作">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="showNew(scope.row)">查看</el-button>
            <el-button type="text" size="small" @click="showEditNew(scope.row)">编辑</el-button>

            <template v-if="scope.row.newStatus=='待审核'">
              <el-popconfirm
                confirm-button-text='确定'
                cancel-button-text='不用了'
                icon="el-icon-info"
                icon-color="red"
                title="确定要撤回该资讯吗？"
                @confirm="deleNew(scope.row.id)"
              >
                <el-button type="text" size="small" slot="reference">撤回</el-button>
              </el-popconfirm>
            </template>
          </template>
        </el-table-column>
      </el-table>
      <div class="block">
        <el-pagination
          @current-change="handleCurrentChange"
          :current-page.sync="pagination.currentPage"
          :page-size="pagination.pageSize"
          layout="total, prev, pager, next"
          :total="pagination.totals">
        </el-pagination>
      </div>
    </div>
  </div>

</template>

<script>

  import E from 'wangeditor'
  import EditorBar from './editoritem'
  import Common from '@/components/common/Common'

  const axios = require("axios");

  const id = sessionStorage.getItem("userid");


  export default {
    name: "ReleaseNew",
    components: {EditorBar},
    created: function () {
      if (sessionStorage.getItem("userid") == null && sessionStorage.getItem("status") != '6') {
        this.$router.push("/login");
      }
      this.id = sessionStorage.getItem("userid");
      this.addForm.userid = this.id
      console.log(localStorage.getItem("userid"))
    },
    mounted: function () {
      this.id = sessionStorage.getItem("userid");
      this.addForm.userid = this.id
      this.path = Common.API;
      this.getData();
    },
    data() {
      return {
        formInline: {
          user: '',
          region: ''
        },
        dataList: [],
        pagination: {
          pageSize: 6, // 显示的条数
          totals: 12, // 总数
          currentPage: 1, // 当前第几页
        },
        fileList: [],
        form: {
          search: "",
          status: "全部",
          data: [new Date(2020, 10, 10, 10, 10), new Date(2021, 10, 11, 10, 10)],
          startTime: "",
          endTime: ""
        },
        showAddDialog: false,
        showEditDialog: false,
        showCheckDialog: false,
        addForm: {
          newContent: '',
          newTitle: '',
          newImg: '',
          userid: '',
        },
        editForm: {
          id: '',
          newTitle: '',
          newContent: '',
          newImg: '',
        },
        showForm: {
          newTitle: '',
          newContent: '',
          newImg: '',
          newTime: '',
          newStatus: '',
        },
        path: '',
      }
    },
    methods: {
      eidtChange(val) {
        this.editForm.newContent = val;
      },
      addChange(val) {
        this.addForm.newContent = val;
      },
      editHandlePictureCardPreview(file) {
        this.editForm.newImg = URL.createObjectURL(file.raw);
      },
      editHandleChange(file) {
        this.editForm.newImg = URL.createObjectURL(file.raw);
        console.log("sdfsdfsdfsdfsdfsdf");
      },
      addHandlePictureCardPreview(file) {
        this.addForm.newImg = URL.createObjectURL(file.raw);
      },
      addHandleChange(file) {
        this.addForm.newImg = URL.createObjectURL(file.raw);

      },
      beforeAvatarUpload(file) {

        if (file) {
        } else {
          console.log("sdfsdfsdfsdfsdfsdf");
          this.$refs.editForm.submit();
        }
      },
      upSuccess(res) {
        if (res.code == 200) {
          this.$message({
            message: res.msg,
            type: 'success'
          });
          this.addFormClose();
          this.getData();
        } else {
          this.$message.error(res.msg);
        }
      },
      editSuccess(res) {
        if (res.code == 200) {
          this.$message({
            message: res.msg,
            type: 'success'
          });
          this.showEditDialog = false;
          this.getData();
        } else {
          this.$message.error(res.msg);
        }
      },
      addSubmit() {
        this.$refs.addImg.submit();

      },
      deleNew(id) {
        var vm = this;
        axios.post(Common.API + 'news/deleNew', {
          id: id
        })
          .then(function (res) {
            if (res.data.code == 200) {
              vm.$message({
                message: res.data.msg,
                type: 'success'
              });
              vm.getData();
            } else {
              vm.$message.error(res.data.msg);
            }
          })
      },
      editSubmit(editForm) {
        var vm = this;
        var str = this.editForm.newImg;
        str = str.substring(0, 4);
        if (str == "blob") {
          this.$refs.editImg.submit();
        } else {
          axios.post(Common.API + 'news/editNewNllImg', vm.editForm)
            .then(function (res) {
              if (res.data.code == 200) {
                vm.$message({
                  message: res.data.msg,
                  type: 'success'
                });
                vm.showEditDialog = false;
                vm.getData();
              } else {
                vm.$message.error(res.data.msg);
              }
            })
        }
      },
      handleCurrentChange(val) {
        this.pagination.currentPage = val;
        this.getData();
      },
      getRecent() {
        var vm = this;
        axios.post(Common.API + 'news/getRecent', {
          userid: id
        })
          .then(function (res) {
            vm.pagination.currentPage = 1;
            vm.pagination.totals = res.data.length;
            vm.dataList = res.data;
          })
          .catch(function (error) {
            console.log(error);
          });
      },
      addFormClose() {
        this.showAddDialog = false;
        this.$refs.addForm.resetFields()
      },
      getData() {
        var vm = this;
        axios.post(Common.API + 'news/getNews?isAudit=0', {
          startTime: vm.form.data[0],
          endTime: vm.form.data[1],
          news: {
            newStatus: vm.form.status,
            newTitle: vm.form.search,
            userid: vm.addForm.userid
          },
          page: {
            current: vm.pagination.currentPage,
            size: vm.pagination.pageSize,
          }
        })
          .then(function (res) {
            vm.pagination.totals = res.data.total;
            vm.dataList = res.data.records;
          })
          .catch(function (error) {
            console.log(error);
          });
      },
      showNew(row) {
        this.showForm.newContent = row.newContent;
        this.showForm.newImg = Common.API + row.newImg;
        this.showForm.newStatus = row.newStatus;
        this.showForm.newTime = row.newTime;
        this.showForm.newTitle = row.newTitle;
        this.showCheckDialog = true;
      },
      showEditNew(row) {
        this.editForm.id = row.id;
        this.editForm.newContent = row.newContent;
        this.editForm.newImg = Common.API + row.newImg;
        this.editForm.newStatus = row.newStatus;
        this.editForm.newTime = row.newTime;
        this.editForm.newTitle = row.newTitle;
        this.showEditDialog = true;
      }
    }
  }
</script>

<style scoped>
  body {
    height: 100%;
  }

  h1, h2 {
    font-weight: normal;
  }

  ul {
    list-style-type: none;
    padding: 0;
  }

  li {
    display: inline-block;
    margin: 0 10px;
  }

  a {
    color: #42b983;
  }

  .title {
    margin-left: 30px;
    line-height: 50px;
    width: 100%;
    font-size: 30px;
    height: 50px;
  }

  .ReleaseNewPage {
    width: 100%;
    /*height: 100%;*/
    /*height:400px;*/
  }

  .ReleaseNewPage .head {
    padding-top: 20px;
    width: 80%;
    margin: 0 auto;
  }

  .ReleaseNewPage .demo-form-block {
    display: block;
  }

  .ReleaseNewPage .content {
    width: 80%;
    margin: 0 auto;
  }

  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }

  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }

  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }

  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }

</style>
